<template>
  <el-dialog v-model="visible" :title="titleText" width="30%" draggable>

    <label for="fileNameID" style="padding-right:10px;left:0px;width: 30%;">名称</label>
    <el-input id="fileNameID" v-model="fileName" autofocus size="mini" :ref="FileNameInput"
      style="width: 60%;"></el-input>
    <el-divider content-position="left">类型</el-divider>
    <el-radio-group v-if="mainType == 'file'" v-model="createTypeRadio" class="ml-4">
      <el-radio label='common' size="large">常规</el-radio>
      <el-radio label='autocad' size="large">CAD制图</el-radio>
      <el-radio label='xmind' size="large">思维导图</el-radio>
    </el-radio-group>
    <el-radio-group v-if="mainType == 'project'" v-model="createTypeRadio" class="ml-4">
      <el-radio label='uml' size="large">UML设计</el-radio>
      <el-radio label='prototype' size="large">原型设计</el-radio>
    </el-radio-group>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
    
<script  setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
// import axios from 'axios';

import {KeyGenerator} from '../../script/canvas/common/keygenerator';

import { FileAccessSvc } from '../../script/manage/service/FileAccessSvc'
import lgxcom from '../../script/canvas/common/common';
import { LgxCompressTool } from '../../script/canvas/common/tools/commpresstool';

import { useStore } from 'vuex';
const store = useStore();

const visible = ref(false)
const fileName = ref("未命名")
const mainType = ref("file")
const createTypeRadio = ref('xmind');
const titleText = ref("文件")

const onConfirm = () => {
  console.log("newFileDlg show--------------:" + fileName.value + "  " + createTypeRadio.value);
  visible.value = false;
  post2CreateNewChartForNewFile(mainType.value, createTypeRadio.value, fileName.value);
  ElMessage('创建成功')
}


var post2Save = function (maintype, filetype, fileName, data, iconURL) {
  var url = "api/graph/save";
  var postObj = {};
  postObj["uuid"] = KeyGenerator.rid();
  postObj["data"] = LgxCompressTool.compresse2Base64Str(data);
  postObj["name"] = fileName;
  postObj["parent"] = "root";
  postObj["maintype"] = maintype;
  postObj["filetype"] = filetype;
  postObj["folder"] = "root";
  postObj["iconURL"] = iconURL;
  postObj["userid"] = store.state.uid;
  let projectID = "";
  if (maintype == "project") {
    projectID = postObj["uuid"];
  }
  postObj["projectid"] = projectID;

  let bk = new lgxcom.LGXColor();
  if (maintype == "autocad"){
    bk.setVal(0,0,0);
  }
  else{
    bk.setVal(255,255,255);
  }
  let extInfo={backColor:bk.toValue()} ;
  let extInfoStr = JSON.stringify(extInfo);
  postObj["extInfo"] = extInfoStr;

  let that = this;

  axios.post(url, postObj).then(res => {
    let respData = res.data;
    console.log(res.data);
    if (respData.ret) {
      FileAccessSvc.open(respData.uuid);
    }
  }).catch(function (error) {
    console.log(error);
  })
}

var post2CreateNewChartForNewFile = function (maintype, filetype, fileName) {
  console.log("save file");
  let emptyFileData = getEmptyFileData();
  let iconURL = "";
  post2Save(maintype, filetype, fileName, emptyFileData, iconURL);
}

var getEmptyFileData = function () {
  var graphFileObj = {};
  var array = [];
  graphFileObj["elements"] = array;
  var version = "v0.0.0.1";
  graphFileObj["version"] = version;
  graphFileObj["mapScale"] = 1;
  graphFileObj["fileKind"] = 0;
  graphFileObj["scaling"] = 1;
  graphFileObj["vleft"] = 0;
  graphFileObj["vtop"] = 1000;
  graphFileObj["vright"] = 760;
  graphFileObj["vbottom"] = 0;
  graphFileObj["seed"] = 1000;

  let dltBackColor = 0;
  if (createTypeRadio.value != "autocad") {
    dltBackColor = 16777215;
  }

  graphFileObj["backColor"] = dltBackColor;
  graphFileObj["fileMode"] = createTypeRadio.value;

  return graphFileObj;
}



defineExpose({
  visible,
  mainType,
  titleText
});

</script>